<template>
  <div class="ass">
    <page :scre="true">
      <template v-slot:left>
        <span>一共{{ total }}条数据</span>
      </template>
      <template #right>
        <el-button
          v-allow="'work'"
          type="warning"
          size="small"
          @click="$router.push('/import')"
        >导入excel</el-button>
        <el-button
          v-allow="'point-user-delete'"
          type="danger"
          size="small"
        >导出excel</el-button>
        <el-button
          type="primary"
          size="small"
          @click="showDialog = true"
        >新增员工</el-button>
      </template>
    </page>
    <el-card style="margin-top: 10px">
      <el-table v-loading="loading" :data="list" border>
        <el-table-column type="index" label="序号" />
        <el-table-column prop="username" label="姓名" />
        <el-table-column prop="workNumber" label="工号" />
        <el-table-column
          prop="formOfEmployment"
          label="聘用形式"
          :formatter="formatt"
        />
        <el-table-column prop="departmentName" label="部门" />

        <el-table-column label="入职时间">
          <template v-slot="scope">
            {{ geshihua(scope.row.timeOfEntry) }}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="280">
          <template v-slot="scope">
            <el-button type="text" size="small">查看</el-button>
            <el-button
              type="text"
              size="small"
              @click="ju(scope.row.id)"
            >分配角色</el-button>
            <el-button
              type="text"
              size="small"
              @click="shanchu(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <el-pagination
          :total="total"
          :page-size="pages.size"
          :current-page="pages.page"
          layout="prev, pager, next"
          @current-change="change"
        />
      </el-row>
      <!-- 添加 -->
      <addorEdit :show-dialog.sync="showDialog" @ge="getEmployee" />
      <!-- 角色 -->
      <quanxian ref="so" :userid="userid" :show.sync="show" />

      <!--  -->
    </el-card>
  </div>
</template>

<script>
import page from '@/components/pageTools/index.vue'
import { getEmployeeList, delEmployee } from '@/api/employess'
import emm from '@/api/constant/employees'
import { formatDate } from '@/filters'
import addorEdit from './com/tess.vue'
import quanxian from '@/views/employees/quanxian.vue'
export default {
  name: 'VueAdminTemplateIndex',
  components: {
    page,
    addorEdit,
    quanxian
  },
  data() {
    return {
      userid: '',
      show: false,
      showDialog: false,
      loading: false,
      list: [],
      pages: {
        page: 1,
        size: 10
      },
      total: 0
    }
  },
  created() {
    this.getEmployee()
  },
  mounted() {},

  methods: {
    // 获取列表
    async getEmployee() {
      this.loading = true
      const res = await getEmployeeList(this.pages)
      console.log(res)
      this.list = res.rows
      this.total = res.total
      this.loading = false
    },
    change(val) {
      this.pages.page = val
      this.getEmployee()
    },
    // 格式化
    formatt(row, column, cellValue, index) {
      // id===id侧有
      const res = emm.hireType.find((item) => item.id === cellValue)
      return res ? res.value : '未知'
    },
    // 格式化时间
    geshihua(data) {
      return formatDate(data)
    },
    // 删除
    shanchu(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          console.log(id)
          const res = await delEmployee(id)
          console.log(res)
          this.getEmployee()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    async ju(id) {
      await this.$refs.so.huoqu(id)
      console.log(id)
      this.userid = id
      this.show = true
    }
  }
}
</script>

<style lang="scss" scoped>
.ass {
  padding: 20px 30px;
}
::v-deep .el-card__body {
  padding: 10px 10px !important;
}
</style>
